import React, { Component } from 'react';

import {
  StyleSheet, View, TouchableWithoutFeedback, Dimensions, Image, Text,
} from 'react-native';

// import { ListImageInfo } from '../../../components';
import Theme from '../../../native-base-theme/variables/commonColor';

const { height: _height } = Dimensions.get('window');

// 故障单状态码

// DRAFT("-1", "草稿"),

// REVOKE("01", "撤销"),

// DRAFTCLOSE("02", "草稿关闭"),

// YSGB("03", "验收关闭"),

// YLWTGB("04", "带遗留问题关闭"),

// DJS("10", "待接收"),

// YJS("20", "已接收"),

// WXWC("30", "维修完成");

class Item extends Component {
  constructor(props) {
    super(props);
    this.state = {
      type: 0,
    };
  }

  render() {
    const { item } = this.props;
    let source = { uri: item.failurePic };
    // const userId = global.user.name;
    // const userOrgId = global.user.organization.id;


    if (this.state.type === 1) {
      source = require('../../../../assets/images/no-pic.png');
    }
    // let dotColor = '#29e121';
    // if (item.failureStatus == '01') {
    //   dotColor = '#1a192d'; // 背景色
    // } else if (item.failureStatus == '02' || item.failureStatus == '03' || item.failureStatus == '04') {
    //   dotColor = '#b9b9b9'; // 灰色
    // } else if (userId == item.reporter) {
    //   if (item.failureStatus == 30) {
    //     dotColor = '#e13821'; // 红色
    //   } else {
    //     dotColor = '#29e121'; // 绿色
    //   }
    // } else if (userOrgId == item.maintOrgId) {
    //   if (item.failureStatus == 10 || item.failureStatus == 20) {
    //     dotColor = '#e13821'; // 红色
    //   } else {
    //     dotColor = '#29e121'; // 绿色
    //   }
    // }

    // let level = '高';
    // if (item.failureLevel === 'A') {
    //   level = '高';
    // } else if (item.failureLevel === 'B') {
    //   level = '中';
    // } else {
    //   level = '低';
    // }

    return (
      <View style={styles.rootContainer}>
        <TouchableWithoutFeedback
          style={styles.touchableContainer}
          onPress={() => this.props.onItemClick(item)}
        >
          <View style={styles.image}>
            {/* <ListImageInfo dotColor="red" title={item.failureCode} text={item.failurePic} /> */}
            <View style={styles.info_container}>
              <View style={styles.info_titleContainer}>
                {/* <Text style={[styles.info_badge, { backgroundColor: dotColor }]} /> */}
                <View>
                  <Text style={styles.info_title}>
                    {item.equipmentCode}
                  </Text>
                </View>
                {/* <View style={styles.level}>
                  <Text style={{ color: 'white', fontSize: 12 }}>{level}</Text>
                </View> */}
              </View>
              <View style={styles.info_tip_container}>
                <Text style={[styles.info_title]}>
                  {item.equipmentName}
                </Text>
              </View>
              <View style={styles.info_tip_container}>
                {/* <Image
                  style={styles.info_tip_icon}
                  source={require('../../../../assets/images/tip-incident.png')}
                /> */}
                <Text style={styles.info_text}>
                  设备状态：{item.equipmentStatusName}
                </Text>
              </View>
              <View style={styles.info_tip_container}>
                {/* <Image
                  style={styles.info_tip_icon}
                  source={require('../../../../assets/images/tip-time.png')}
                /> */}
                <Text style={styles.info_text}>
                  本月巡检次数：{item.monthCheckNum}
                </Text>
              </View>
            </View>
            <Image
              onPress={() => this.props.onItemClick(item)}
              style={styles.image}
              resizeMode="contain"
              source={source}
              fadeDuration={0}
              onError={() => {
                this.setState({
                  type: 1,
                });
              }
              }
            />
          </View>
        </TouchableWithoutFeedback>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  info_tip_container: {
    flexDirection: 'row',
  },
  info_tip_icon: {
    width: 24,
    height: 24,
    marginLeft: 30,
  },
  rootContainer: {
    height: _height - 20,
    flex: 1,
    backgroundColor: Theme.myPrimary,
    justifyContent: 'center',
    alignItems: 'center',
  },
  touchableContainer: {
    flex: 1,
  },
  level: {
    marginLeft: 10,
    backgroundColor: '#207aff',
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: '#207aff',
    borderRadius: 9,
    width: 34,
    height: 16,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: '100%',
    height: '100%',
  },
  badge: {
    height: 20,
    width: 20,
    borderRadius: 10,
    backgroundColor: 'red',
    marginRight: 10,
  },
  info_container: {
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
    padding: 8,
    borderRadius: 8,
    position: 'absolute',
    bottom: 58,
    left: 8,
    zIndex: 1,
  },
  info_titleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  info_title: {
    fontSize: 17,
    fontWeight: 'bold',
    color: 'white',
    maxWidth: 200,
  },
  info_text: {
    fontSize: 16,
    color: 'white',
    flexWrap: 'wrap',
    maxWidth: 200,
  },
  info_badge: {
    marginRight: 10,
    borderStyle: 'solid',
    borderColor: '#ffffff',
    borderWidth: 2,
    width: 20,
    height: 20,
    borderRadius: 10,
  },
});

export default Item;
